<template>
  <div class="file-page">
    <div style="height: 100%">
      <el-col :span="5" style="padding-right: 10px">
        <div class="left-body">
          <div class="title">
            案件卷宗
            <div class="search">
              <el-input v-model="typeFilter" placeholder="输入类型关键字" />
            </div>
          </div>
          <div class="type-list">
            <div
              class="type-item"
              :class="currType==item.id?'type-item-active':''"
              v-for="item in typeList"
              :key="item.id"
              v-if="item.contentName.indexOf(typeFilter)!=-1"
              @click="changeType(item)"
            >
              {{item.contentName}}
              <i class="el-icon-link" v-if="item.fileUrl"></i>
              <i class="el-icon-printer" v-if="printedList.indexOf(item.contentName)!=-1"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="14" style="padding-right: 10px">
        <div class="document">
          <div class="title">
            {{contentName}} -预览
            <el-button
              type="primary"
              size="mini"
              v-print="'#print'"
              @click="ifPrint"
              style="float:right;margin:8px 0 0 8px;"
            >打印</el-button>
            <el-button
              id="hidButton"
              type="primary"
              size="mini"
              v-print="'#printNow'"
              style="float:right;margin:8px 0 0 8px;position:absolute;z-index:-1;"
            >打印</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="printAll"
              style="float:right;margin:8px 0 0 8px;"
            >全部打印</el-button>
          </div>
          <div id="print" v-html="detailUrl" readonly style="padding:15px 30px"></div>
          <div id="printNow" v-html="nowHtml" readonly style="position:absolute;z-index:-1;"></div>
        </div>
      </el-col>
      <el-col :span="5" style="padding-right: 10px">
        <div class="appendix">
          <div class="title" style="padding-right:10px;">{{contentName}} - 附件</div>
          <!-- <div v-if="fileList && fileList.length">
            <viewer :images="fileList">
              <img v-for="src in fileList" :src="src.url" :key="src.name" />
            </viewer>
          </div>-->
          <viewer :images="fileList">
            <div v-for="(src, index) in fileList" :key="index" class="images">
              <img :src="serverRoot+src.url" />
            </div>
            <div v-if="!fileList" class="prompt">
              <span>无附件</span>
            </div>
          </viewer>
        </div>
      </el-col>
      <div class="clearfix"></div>
    </div>
    <el-dialog
      title="全部卷宗"
      :visible.sync="dialogVisible"
      @opened="dialogOpen"
      class="archive-print-dialog"
    >
      <el-button
        id="dialogPrint"
        type="primary"
        size="mini"
        v-print="'#printAll'"
        style="float:right;margin:8px 0 0 8px;"
      >打印</el-button>
      <div id="printAll" v-html="allHtml" readonly style="padding:15px 30px"></div>
    </el-dialog>
  </div>
</template>
<script>
import caseDocApi from "@/api/system/caseDoc";
import utils from "@/assets/utils/zhzf-util";
import "viewerjs/dist/viewer.css";
import Vue from "vue";
import Viewer from "v-viewer";
import Print from "vue-print-nb";
Vue.use(Viewer);
Vue.use(Print);
export default {
  name: "archives",
  data() {
    return {
      currType: "",
      currFile: "",
      typeList: {},
      fileList: [],
      typeFilter: "",
      detailUrl: "",
      fileUrl: "",
      images: "",
      contentName: "",
      allHtml: "",
      dialogVisible: false,
      detail: {},
      nowHtml: "",
      printedList: [],
      serverRoot: process.env.VUE_APP_API
    };
  },
  mounted() {
    this.detail = this.$route.params.row;
    this.initPage(this.detail);
  },
  methods: {
    async initPage(detail) {
      caseDocApi.select({ caseBasicinfoId: detail.caseAccessId }).then(res => {
        var data = res.data;
        this.typeList = data;
        this.detailUrl = this.typeList[0].detailUrl;
        this.currType = this.typeList[0].id;
        this.contentName = this.typeList[0].contentName;
        this.fileList = JSON.parse(this.typeList[0].fileUrl);
      });
    },
    async changeType(item) {
      this.currType = item.id;
      this.detailUrl = item.detailUrl;
      this.contentName = item.contentName;
      this.fileList = JSON.parse(item.fileUrl);
    },
    async changeFile(item) {
      this.currFile = item.name;
      this.fileUrl = item.url;
    },

    async printAll() {
      this.dialogVisible = true;
      var allHtml = "";
      for (var i = 0; i < this.typeList.length; i++) {
        allHtml += this.typeList[i].detailUrl;
        if (this.typeList[i].fileUrl) {
          var imgList = JSON.parse(this.typeList[i].fileUrl);
          for (var j = 0; j < imgList.length; j++) {
            allHtml +=
              "<div style='page-break-after: always;'><img src =" +
              imgList[j].url +
              "></div>";
          }
        }
        this.printedList.push(this.typeList[i].contentName);
      }
      this.allHtml = allHtml;
    },
    /* async printAll() {
       for(var i = 0; i < this.typeList.length; i++){
        this.nowHtml += this.typeList[i].detailUrl;
      } 
       document.getElementById("hidButton").click();
    }, */
     ifPrint() {
     this.printedList.push(this.contentName);
    },
    async dialogOpen() {
      await document.getElementById("dialogPrint").click();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.archive-print-dialog {
  z-index: -1 !important;
}
.file-page {
  $page-height: calc(100vh - 150px);
  padding: 20px 0;
  .left-body {
    overflow: auto;
    height: $page-height;
    border: 1px solid #ccc;
    background-color:#fff;
  }
  .search {
    float: right;
    width: calc(100% - 80px);
    input {
      height: 33px;
    }
  }
  .document {
    position: relative;
    // width:760px;
    overflow: auto;
    background-color:#fff;
    border: 1px solid #ccc;
    height: $page-height;
    // box-shadow: -5px -5px 5px -2px #ccc;
    margin-bottom: 50px;
    .doc-detail {
      padding: 15px 35px;
      // table{
      //   width: 700px;
      // }
    }
  }
  .appendix {
    height: $page-height;
    overflow: auto;
    background-color:#fff;
    img {
      width:calc(100% - 8px);
      border:4px solid #ccc;
    }
    .images{
      position: relative;
      background: #ddd;
      padding: 5px;
    }
    .prompt{
      line-height: 10;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color:#ccc;
    }
  }
  .type-list {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    border-top: none;

    .type-item {
      padding: 0 15px;
      border-bottom: 1px solid #ccc;
      line-height: 35px;
      height: 35px;
      cursor: pointer;
      i {
        float: right;
        font-size: 20px;
        line-height: 36px;
      }
    }

    .type-item-active,
    .type-item:hover {
      background: #c9e6ff;
    }

    .type-item-active {
      color: #027be3;
    }
  }
  .clearfix {
    content: "";
    clear: both;
  }
}
</style>
